<template>

  <div style=" display: -webkit-flex;display: flex;flex-direction: column; height: 100%">
    <div class="dashboard-container">
      <el-card class="box-card">
        <div slot="header" class="header_warp">
          <span>汇总数据</span>
          <StatusTab :datas="totalModels"/>
        </div>
        <div class="card-content">
          <DataPageGroup/>
        </div>
      </el-card>
    </div>
    <div class="chart-warp">
      <span>今天数据统计</span>
      <LineChart/>
    </div>
  </div>

</template>

<script>

import { mapGetters } from 'vuex'
import LineChart from '@/components/chart/LineChart'
import StatusTab from '@/components/StatusTab'
import DataPageGroup from './components/DataPageGroup'
export default {
  name: 'Dashboard',
  components: { StatusTab, DataPageGroup, LineChart },
  data() {
    return {
      totalModels: [{ value: '', label: '今天' }, { value: 0, label: '昨天' }, { value: 1, label: '总计' }]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped >

  .dashboard-container{
    .el-card__header{
      padding: 0px 15px;
      height: 48px;
      .header_warp{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          flex: 1;
        }
      }
    }
  }

  .chart-warp{
    flex: 1;
    width: 100%;
    padding: 15px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    margin: 15px 0px 15px 0px;
    background: white;
    border-radius: 4px;

  }

</style>
